
import React, { Component } from 'react';
import {
	StyleSheet, Text, FlatList, Animated, View, Image, TouchableOpacity, Alert
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import MethodUtil from '../../../utils/MethodUtil';
let upDegreen = require('../../../imgs/my-siter/up.png');
let downDegreen = require('../../../imgs/my-siter/down.png');

const scale = GLOBAL.SCALE;

export class NonDetailList extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '列表',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {

		}
	}

	render() {
		let { data } = this.props.navigation.state.params
		let { priceType, appOrderDetailsVTOS, chineseName, custPurNum, offerBottomPrice, suggestedPrice, udPrice, areaIdName } = data
		let qualitySum = 0
		appOrderDetailsVTOS && appOrderDetailsVTOS.map(item => {
			qualitySum += item.intentionQuantity
		})
		return (
			<View style={styles.container}>
				<View style={styles.itemBox}>
					<View style={styles.itemTop}>
						<View style={styles.itemTitle}>
							<View style={styles.itemTopLeft}>
								<Text style={{ color: '#040404', fontWeight: '600' }}>{chineseName}</Text>
							</View>
						</View>
						<View style={[styles.itemTitle, { paddingLeft: 10 * scale, marginTop: 12 * scale }]}>
							<Text style={styles.titleText}>数量 {custPurNum} 吨</Text>
							<View style={{ flexDirection: "row", alignItems: 'center' }}>
								{priceType == 1 ?
									<Text style={styles.titleText}>报盘底价 ¥ {MethodUtil.toThousands(offerBottomPrice || 0, 2) || '-'} 元/吨 </Text> :
									<Text style={styles.titleText}>{udPrice > 0 ? '+' : ''}¥{MethodUtil.toThousands(udPrice || 0, 2)} 元/吨 </Text>
								}
								<Text style={[styles.priceType, priceType == 2 ? { color: '#FA6400', backgroundColor: '#FBEFE8' } : { color: '#85C0EC', backgroundColor: '#ECF7FF' }]}>
									{priceType == 2 ? '升贴水' : '一口价'}
								</Text>
							</View>
						</View>
						<View style={[styles.itemTitle, { paddingLeft: 10 * scale, marginTop: 12 * scale }]}>
							{suggestedPrice ?
								<Text style={styles.titleText}>{areaIdName}现货价：¥{MethodUtil.toThousands(suggestedPrice || '0')}/吨 </Text> : null
							}
						</View>
					</View>
					<View style={styles.itemMiddle}>
						{appOrderDetailsVTOS && appOrderDetailsVTOS.length > 0 ?
							appOrderDetailsVTOS.map((item, index) => {
								let price
								if (priceType == 2) {
									price = item.udPrice
								}
								else {
									price = item.price
								}
								return (
									<View key={index}>
										<View style={styles.costBox}>
											<Text style={{ fontSize: 12 * scale }}>{item.companyName}</Text>
											<View style={styles.costItem}>
												<Text style={[styles.costTextLeft, { marginRight: 60 * scale }]}>成交单价</Text>
												<Text style={styles.costNum}>{MethodUtil.toThousands(price || 0, 2) || '-'}</Text>
												<Text style={styles.costTextLeft}>元/吨</Text>
												{suggestedPrice ?
													<View style={styles.costTableRight}>
														<Image source={price - suggestedPrice > 0 ? upDegreen : downDegreen} style={styles.priceFlag} />
														<Text style={price - suggestedPrice > 0 ? styles.tableUpText : styles.tableDownText}>{Math.abs(price - suggestedPrice)}</Text>
													</View>
													: null
												}
											</View>
											<View style={styles.costItem}>
												<Text style={[styles.costTextLeft, { marginRight: 60 * scale }]}>报盘数量</Text>
												<Text style={styles.costNum}>{item.quantity}</Text>
												<Text style={styles.costTextLeft}>吨</Text>
											</View>
											<View style={styles.costItem}>
												<Text style={[styles.costTextLeft, { marginRight: 60 * scale, color: "#CA0202", marginLeft: -5 * scale }]}>*成交数量</Text>
												<Text style={styles.costNumInput}>{item.intentionQuantity}</Text>
												<Text style={styles.costTextLeft}>吨</Text>
											</View>
										</View>
									</View>
								)
							})
							: null
						}
					</View>
					<View style={styles.itemBottom}>
						<Text style={{ fontSize: 12 * scale }}>合同意向{appOrderDetailsVTOS && appOrderDetailsVTOS.length}项，总量：{qualitySum}吨</Text>
					</View>
				</View>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.bgGray,
	},
	body: {
		flex: 1,
		backgroundColor: '#E8ECF5',
	},
	itemBox: {
		marginTop: 20 * scale,
		backgroundColor: '#fff',
		borderRadius: 6 * scale,
		marginHorizontal: 20 * scale
	},
	itemTop: {
		paddingVertical: 10 * scale,
		paddingRight: 10 * scale,
		borderBottomColor: '#E3E7F0',
		borderBottomWidth: 1 * scale
	},
	itemTitle: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	itemTopLeft: {
		flexDirection: 'row',
		alignItems: 'center',
		marginLeft: 8 * scale
	},
	lockView: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		height: 12 * scale,
		width: 12 * scale,
		borderWidth: 1 * scale,
		borderColor: style.color.themeColor,
		marginRight: 10 * scale,
		marginLeft: 10 * scale
	},
	lockImage: {
		tintColor: style.color.themeColor,
		width: 8 * scale,
		height: 8 * scale,
		marginLeft: 1 * scale
	},
	imgStyle: {
		tintColor: '#000',
		width: 10 * scale,
		height: 6 * scale,
		transform: [{ rotate: '-90deg' }]
	},
	itemBottom: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		paddingBottom: 12 * scale,
		paddingHorizontal: 10 * scale,
	},
	priceType: {
		fontSize: 10,
		paddingVertical: 2,
		paddingHorizontal: 5,
		backgroundColor: '#FBEFE8',
		marginLeft: 5 * scale
	},
	titleText: {
		color: '#000',
		fontSize: 11 * scale,
		fontWeight: '600'
	},
	itemMiddle: {
		paddingVertical: 10 * scale,
		paddingHorizontal: 10 * scale,
	},
	priceFlag: {
		width: 6,
		height: 10,
		marginRight: 3
	},
	tableUpText: {
		fontSize: 10,
		color: '#E02020'
	},
	tableDownText: {
		fontSize: 10,
		color: '#56C910'
	},
	costTableRight: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		marginRight: 16
	},
	costItem: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 56 * scale,
		marginTop: 13 * scale
	},
	costBox: {
		paddingVertical: 12 * scale,
		borderBottomWidth: 1 * scale,
		borderBottomColor: '#E3E7F0'
	},
	costTextLeft: {
		fontSize: 12 * scale,
		color: '#000',
		marginRight: 10 * scale
	},
	costNum: {
		fontSize: 12 * scale,
		color: '#000',
		opacity: 0.78,
		width: 80 * scale
	},
	costNumInput: {
		color: '#000',
		fontWeight: '600',
		width: 80 * scale
	},
	toggleImg: {
		width: '100%',
		marginBottom: 10 * scale,
		alignItems: "center",
		justifyContent: 'center'
	},
	downImg: {
		width: 12 * scale,
		height: 12 * scale
	},
})